import React,{useEffect,useState,useRef} from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,Image,
    TouchableWithoutFeedback, TextInput,
} from 'react-native';
import Header from '../../widgets/Header';
import {getffly} from '../../utils/common';
import screen from '../../utils/screen';
import {useStores} from '../../store';
import {observer} from 'mobx-react';
import {LGBtn} from '../../widgets/buttons';
import RequestUtil from '../../utils/RequestUtil';
import Api from '../../utils/Api';
import {AppModal} from '../../widgets/modal';
import Images from '../../images/Images';
import Constants from '../../utils/Constants';



export default ({navigation})=>{


    const [data,setData] = useState(null)


    useEffect(()=>{
        getData()
    },[])

    const getData = ()=>{

        AppModal.showLoading();

        RequestUtil.get(Api.inviteRule).then(res=>{

            let data = res.data
            console.log('inviteRule',data)
            AppModal.hideTip()

            setData(data)
        },error=>{
            AppModal.hideTip()
            AppModal.showError(error.msg)
            console.log('inviteRule error',error)
        })

    }

    const renderItem = (item,index)=>{
        return (
            <View style={{height:screen.PIXEL_70,width:'100%',flexDirection:'row',alignItems:'center'}}
                  key={index.toString()}
            >
                <Text style={{fontSize:11,color:'#FF7012',flex:1,textAlign:'center'}}>T{item.id}</Text>
                <Text style={{fontSize:11,color:'#0B897A',flex:1,textAlign:'center'}}>{item.member} {Constants.team.qualified}</Text>
                <Text style={{fontSize:11,color:'#FF7012',flex:1,textAlign:'center'}}>{Constants.appsymbol} {item.reward}</Text>
            </View>
        )
    }

    const renderTeamItem = (item,index)=>{
        return (
            <View style={{height:screen.PIXEL_70,width:'100%',flexDirection:'row',alignItems:'center'}}
                  key={index.toString()}
            >
                <Text style={{fontSize:11,color:'#FF7012',flex:1,textAlign:'center'}}>Lv.{item.level}</Text>
                <Text style={{fontSize:11,color:'#0B897A',flex:1,textAlign:'center'}}>{item.direct}</Text>
                <Text style={{fontSize:11,color:'#FF7012',flex:1,textAlign:'center'}}> {item.indirect}</Text>
                <Text style={{fontSize:11,color:'#FF7012',flex:1,textAlign:'center'}}>{item.third}</Text>
            </View>
        )
    }

    const renderTeamRule = ()=>{
        return (
            <View>

                <View style={{padding:screen.PIXEL_40}}>
                    <Text style={{color:'#000',fontSize:18}}>{Constants.team.team_reward}</Text>
                    <Text style={{color:'#A3A3A3',fontSize:11,marginTop:screen.PIXEL_40}}>{Constants.team.reward_rules_5}</Text>
                    <Text style={{color:'#A3A3A3',fontSize:11,marginTop:screen.PIXEL_40}}>{Constants.team.reward_rules_6}
                        <Text style={{color:'#3D837B'}}>{Constants.appsymbol} {data.team.condition}</Text>
                        {Constants.team.reward_rules_7}
                    </Text>
                    <Text style={{color:'#A3A3A3',fontSize:11,marginTop:screen.PIXEL_40}}>{Constants.team.reward_rules_8}</Text>


                </View>

                <View style={{backgroundColor: '#7ABCB6',width:'100%',height:screen.PIXEL_140}}>
                    <View style={{height:screen.PIXEL_70,width:'100%',justifyContent:'center',alignItems:'center'}}>
                        <Text style={{fontSize:15,color:'#0B897A',}}>{Constants.team.reward_ratio}</Text>
                    </View>
                    <View style={{height:screen.PIXEL_70,width:'100%',flexDirection:'row',alignItems:'center'}}>
                        <Text style={{fontSize:13,color:'#0B897A',flex:1,textAlign:'center'}}>{Constants.team.your_level}</Text>
                        <Text style={{fontSize:13,color:'#0B897A',flex:1,textAlign:'center'}}>{Constants.team.direct}</Text>
                        <Text style={{fontSize:13,color:'#0B897A',flex:1,textAlign:'center'}}>{Constants.team.indirect}</Text>
                        <Text style={{fontSize:13,color:'#0B897A',flex:1,textAlign:'center'}}>{Constants.team.third_layer}</Text>
                    </View>
                </View>

                {
                    data.team.list.map((item,index)=>{
                        return renderTeamItem(item,index)
                    })
                }

                <View style={{padding:screen.PIXEL_40,marginBottom:80}}>
                    <Text style={{color:'#A3A3A3',fontSize:11}}>{Constants.team.your_reward}
                        <Text style={{color:'#0B897A'}}>{' = '}</Text>
                        {Constants.team.order_commission}
                        <Text style={{color:'#0B897A'}}>{' x '}</Text>
                        {Constants.team.ratio}
                    </Text>
                </View>
            </View>
        )
    }

    return (
        <View style={styles.container}>

            <Header title={Constants.team.reward_rules} navigation={navigation}/>

            {
                data && (
                    <ScrollView >
                        <View style={{padding:screen.PIXEL_40}}>
                            <Text style={{color:'#A3A3A3',fontSize:11}}>{Constants.team.reward_rules_1}</Text>
                            <Text style={{color:'#000',fontSize:18,marginVertical:screen.PIXEL_40}}>{Constants.team.referral_reward}</Text>
                            <Text style={{color:'#A3A3A3',fontSize:11}}>{Constants.team.reward_rules_2}
                                <Text style={{color:'#3D837B'}}>{Constants.appsymbol} {data.referral.condition}</Text>
                            </Text>

                            <Text style={{color:'#A3A3A3',fontSize:11,marginTop:screen.PIXEL_40}}>{'There are'}
                                <Text style={{color:'#3D837B'}}> {data.referral.list.length}</Text> {Constants.team.reward_rules_3}
                            </Text>


                        </View>
                        <View style={{backgroundColor: '#7ABCB6',height:screen.PIXEL_70,width:'100%',flexDirection:'row',alignItems:'center'}}>
                            <Text style={{fontSize:13,color:'#0B897A',flex:1,textAlign:'center'}}>{Constants.team.level}</Text>
                            <Text style={{fontSize:13,color:'#0B897A',flex:1,textAlign:'center'}}>{Constants.team.member}</Text>
                            <Text style={{fontSize:13,color:'#0B897A',flex:1,textAlign:'center'}}>{Constants.team.reward}</Text>
                        </View>
                        {
                            data.referral.list.map((item,index)=>{
                                return renderItem(item,index)
                            })
                        }
                        <View style={{padding:screen.PIXEL_40}}>
                            <Text style={{color:'#A3A3A3',fontSize:11}}>{Constants.team.reward_rules_4}</Text>
                        </View>

                        {renderTeamRule()}


                    </ScrollView>
                )
            }



        </View>
    )
}

const styles= StyleSheet.create({
    container:{
        flex:1
    },


})
